<script>
export default {
  data() {
    return {
      message:  "helloworld",
      age: 0,
      user:{
        name:"张三"
      }
    }
  },
  methods:{
    
  },
  computed: {

  },
  watch:{// 1.监听数据变化//一个数据可以影响多个数据
    // 2.每当message变化时，就会调用这个函数，也就是说一开始是没有被调用的，因为默认immediate属性为false
    // 3.这是一种函数式写法
    // message:function(newValue, oldValue) {
    //   console.log(newValue);
    //   console.log(oldValue);
    //   //执行异步操作，或者复杂代码
    //   if(newValue.length < 5 || newValue.length > 10){
    //     console.log("输入长度小于5或者大于10！")
    //   }
    // }

    // 4.watch可以写成函数式也可以写成对象，下面是对象的形式。
    message:{
      immediate: true,// 5.初始化的时候就调用函数
      handler:function(newValue){
        if(newValue.length < 5 || newValue.length > 10){
          console.log("输入长度小于5或者大于10！")
        }
      }
    },
    // 监听不到对象中的属性变化，所以这里需要使用深度监听。
    // user:function(newValue){
    //   console.log(newValue);
    // }


    // user:{
    //   handler:function(newValue){
    //     console.log(newValue);
    //   },
    //   deep: true,//表示是否深度监听，开启后，对象的每一层属性都会监听
    // }

    //单独监听一个属性
    "user.name": {
      handler:function(newValue){
        console.log(newValue);
      },
      deep: true,//表示是否深度监听，开启后，对象的每一层属性都会监听
    }
  }
  
}
</script>

<template>
  <div>
    <p>{{message}}</p>
    <button @click="message='你好'">改变message</button>
    <input type="text" v-model="message">
    <p>{{user.name}}</p>
    <button @click="user.name='李四'">改变名字</button>
  </div>
</template>

<style> 
    

</style>
